<template>
  <div class="returns">
    <div class="operation-header">
      <div class="header-info">
        <h4>退货处理管理</h4>
        <span class="operation-date">处理日期: {{ currentDate }}</span>
      </div>
      <div class="header-actions">
        <button class="primary-btn" @click="newReturn">新建退货</button>
        <button class="secondary-btn" @click="batchProcess">批量处理</button>
      </div>
    </div>

    <!-- 退货申请列表 -->
    <div class="returns-section">
      <h5>退货申请单</h5>
      <div class="filter-bar">
        <div class="filter-item">
          <label>退货类型:</label>
          <select v-model="filters.type">
            <option value="">全部类型</option>
            <option value="customer">顾客退货</option>
            <option value="supplier">供应商退货</option>
            <option value="damage">药品报损</option>
            <option value="expire">过期退货</option>
          </select>
        </div>
        <div class="filter-item">
          <label>状态:</label>
          <select v-model="filters.status">
            <option value="">全部状态</option>
            <option value="pending">待处理</option>
            <option value="approved">已批准</option>
            <option value="rejected">已拒绝</option>
            <option value="completed">已完成</option>
          </select>
        </div>
        <button class="search-btn" @click="searchReturns">查询</button>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th width="30"><input type="checkbox" @change="selectAll"></th>
            <th width="100">退货单号</th>
            <th width="80">退货类型</th>
            <th width="100">申请人</th>
            <th width="80">申请日期</th>
            <th width="100">药品名称</th>
            <th width="60">数量</th>
            <th width="80">退款金额</th>
            <th width="80">状态</th>
            <th width="120">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="returnItem in returnRequests" :key="returnItem.id">
            <td><input type="checkbox" :value="returnItem.id"></td>
            <td>{{ returnItem.returnNo }}</td>
            <td>{{ returnItem.typeText }}</td>
            <td>{{ returnItem.applicant }}</td>
            <td>{{ returnItem.applyDate }}</td>
            <td>{{ returnItem.drugName }}</td>
            <td>{{ returnItem.quantity }}</td>
            <td>¥{{ returnItem.refundAmount.toFixed(2) }}</td>
            <td>
              <span class="status-badge" :class="returnItem.status">
                {{ returnItem.statusText }}
              </span>
            </td>
            <td>
              <button class="action-btn" @click="viewReturn(returnItem.id)">查看</button>
              <button class="action-btn" @click="approveReturn(returnItem.id)" v-if="returnItem.status === 'pending'">审批</button>
              <button class="action-btn" @click="processReturn(returnItem.id)" v-if="returnItem.status === 'approved'">处理</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 快速退货 -->
    <div class="quick-return">
      <h5>快速退货登记</h5>
      <div class="quick-form">
        <div class="form-row">
          <div class="form-group">
            <label>药品名称:</label>
            <input type="text" v-model="quickForm.drugName" placeholder="输入药品名称">
          </div>
          <div class="form-group">
            <label>退货数量:</label>
            <input type="number" v-model="quickForm.quantity" placeholder="数量">
          </div>
          <div class="form-group">
            <label>退货类型:</label>
            <select v-model="quickForm.type">
              <option value="">选择类型</option>
              <option value="customer">顾客退货</option>
              <option value="supplier">供应商退货</option>
              <option value="damage">药品报损</option>
              <option value="expire">过期退货</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>退货原因:</label>
            <select v-model="quickForm.reason">
              <option value="">选择原因</option>
              <option value="quality">质量问题</option>
              <option value="expire">临近过期</option>
              <option value="damage">包装破损</option>
              <option value="mistake">错购退货</option>
              <option value="other">其他原因</option>
            </select>
          </div>
          <div class="form-group">
            <label>申请人:</label>
            <input type="text" v-model="quickForm.applicant" placeholder="申请人姓名">
          </div>
          <div class="form-group">
            <label>联系电话:</label>
            <input type="text" v-model="quickForm.phone" placeholder="联系电话">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group full-width">
            <label>退货说明:</label>
            <textarea v-model="quickForm.description" placeholder="详细说明退货原因和情况" rows="3"></textarea>
          </div>
        </div>
        <div class="form-actions">
          <button class="primary-btn" @click="quickReturn">提交退货申请</button>
          <button class="secondary-btn" @click="clearQuickForm">清空</button>
        </div>
      </div>
    </div>

    <!-- 退货统计 -->
    <div class="return-stats">
      <h5>退货统计概览</h5>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ returnStats.todayCount }}</div>
          <div class="stat-label">今日退货</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ returnStats.pendingCount }}</div>
          <div class="stat-label">待处理</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥{{ returnStats.totalRefund.toLocaleString() }}</div>
          <div class="stat-label">退款金额</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ returnStats.returnRate }}%</div>
          <div class="stat-label">退货率</div>
        </div>
      </div>
      
      <!-- 退货原因分析 -->
      <div class="reason-analysis">
        <h6>退货原因分析</h6>
        <table class="data-table">
          <thead>
            <tr>
              <th>退货原因</th>
              <th>数量</th>
              <th>占比</th>
              <th>趋势</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="reason in reasonAnalysis" :key="reason.type">
              <td>{{ reason.name }}</td>
              <td>{{ reason.count }}</td>
              <td>{{ reason.percentage }}%</td>
              <td>
                <span :class="'trend-' + reason.trend">
                  {{ reason.trendText }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const currentDate = ref(new Date().toLocaleDateString('zh-CN'))

// 筛选条件
const filters = ref({
  type: '',
  status: ''
})

// 退货申请数据
const returnRequests = ref([
  {
    id: 'R001',
    returnNo: 'TH20240115001',
    type: 'customer',
    typeText: '顾客退货',
    applicant: '张先生',
    applyDate: '2024-01-15',
    drugName: '感冒灵颗粒',
    quantity: 2,
    refundAmount: 17.00,
    status: 'pending',
    statusText: '待处理'
  },
  {
    id: 'R002',
    returnNo: 'TH20240115002',
    type: 'expire',
    typeText: '过期退货',
    applicant: '李护士',
    applyDate: '2024-01-15',
    drugName: '维生素C片',
    quantity: 50,
    refundAmount: 125.00,
    status: 'approved',
    statusText: '已批准'
  },
  {
    id: 'R003',
    returnNo: 'TH20240114001',
    type: 'damage',
    typeText: '药品报损',
    applicant: '王医生',
    applyDate: '2024-01-14',
    drugName: '阿莫西林胶囊',
    quantity: 1,
    refundAmount: 18.50,
    status: 'completed',
    statusText: '已完成'
  }
])

// 快速退货表单
const quickForm = ref({
  drugName: '',
  quantity: '',
  type: '',
  reason: '',
  applicant: '',
  phone: '',
  description: ''
})

// 退货统计
const returnStats = ref({
  todayCount: 5,
  pendingCount: 3,
  totalRefund: 2850,
  returnRate: 2.3
})

// 退货原因分析
const reasonAnalysis = ref([
  {
    type: 'quality',
    name: '质量问题',
    count: 12,
    percentage: 35.3,
    trend: 'down',
    trendText: '↓ 下降'
  },
  {
    type: 'expire',
    name: '临近过期',
    count: 8,
    percentage: 23.5,
    trend: 'up',
    trendText: '↑ 上升'
  },
  {
    type: 'damage',
    name: '包装破损',
    count: 6,
    percentage: 17.6,
    trend: 'stable',
    trendText: '→ 稳定'
  },
  {
    type: 'mistake',
    name: '错购退货',
    count: 8,
    percentage: 23.6,
    trend: 'up',
    trendText: '↑ 上升'
  }
])

// 方法
const newReturn = () => alert('新建退货申请')
const batchProcess = () => alert('批量处理退货')
const searchReturns = () => alert('查询退货单')
const selectAll = (event: Event) => {
  const target = event.target as HTMLInputElement
  const checkboxes = document.querySelectorAll('.data-table tbody input[type="checkbox"]')
  checkboxes.forEach((cb: any) => cb.checked = target.checked)
}
const viewReturn = (returnId: string) => alert(`查看退货单: ${returnId}`)
const approveReturn = (returnId: string) => alert(`审批退货: ${returnId}`)
const processReturn = (returnId: string) => alert(`处理退货: ${returnId}`)
const quickReturn = () => {
  if (!quickForm.value.drugName || !quickForm.value.quantity || !quickForm.value.type) {
    alert('请填写必要信息')
    return
  }
  alert('退货申请提交成功')
  clearQuickForm()
}
const clearQuickForm = () => {
  quickForm.value = {
    drugName: '',
    quantity: '',
    type: '',
    reason: '',
    applicant: '',
    phone: '',
    description: ''
  }
}
</script>

<style scoped>
.returns {
  font-size: 12px;
}

.operation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.header-info h4 {
  margin: 0 0 2px 0;
  color: #333;
}

.operation-date {
  font-size: 11px;
  color: #666;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.primary-btn, .secondary-btn, .search-btn {
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  border: none;
}

.primary-btn {
  background: #3498db;
  color: white;
}

.primary-btn:hover {
  background: #2980b9;
}

.secondary-btn {
  background: white;
  border: 1px solid #bdc3c7;
  color: #333;
}

.secondary-btn:hover {
  background: #e8f4f8;
  border-color: #3498db;
}

.search-btn {
  background: #27ae60;
  color: white;
}

.search-btn:hover {
  background: #219a52;
}

.returns-section, .quick-return, .return-stats {
  background: white;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.returns-section h5, .quick-return h5, .return-stats h5 {
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  padding: 8px 15px;
  margin: 0;
  font-size: 13px;
  color: #333;
}

.filter-bar {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  display: flex;
  gap: 15px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-item label {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

.filter-item select {
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  width: 120px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #666;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  vertical-align: top;
}

.data-table tr:nth-child(even) {
  background: #f9f9f9;
}

.data-table tr:hover {
  background: #e8f4f8;
}

.status-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
  color: white;
}

.status-badge.pending {
  background: #f39c12;
}

.status-badge.approved {
  background: #3498db;
}

.status-badge.rejected {
  background: #e74c3c;
}

.status-badge.completed {
  background: #27ae60;
}

.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  margin-right: 5px;
}

.action-btn:hover {
  color: #2980b9;
}

.quick-form {
  padding: 15px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.form-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.form-group.full-width {
  flex-direction: column;
  align-items: stretch;
}

.form-group.full-width label {
  align-self: flex-start;
}

.form-group label {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  width: 80px;
}

.form-group input, .form-group select, .form-group textarea {
  flex: 1;
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 15px;
}

.stat-item {
  text-align: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.reason-analysis {
  padding: 15px;
  border-top: 1px solid #ddd;
}

.reason-analysis h6 {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: #333;
}

.trend-up {
  color: #e74c3c;
}

.trend-down {
  color: #27ae60;
}

.trend-stable {
  color: #95a5a6;
}
</style> 